<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getHostShow } from '@/api/shop'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const oprateloading = ref(false)
	const form = ref({
		performanceId: '',
		performanceName: '',
		images: [],
		emcee: '',
		performanceDescription: '',
		price: 0,
		specifics: '',
	})
	const parseStyle = ref({
		img: 'max-width: 702rpx'
	})
	
	function getData(id) {
		loading.value = true
		getHostShow(id, user.addressIds[2]).then(res => {
			let result = res.result || {images: []}
			form.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function goBuy() {
		if(loading.value || oprateloading.value || !form.value.performanceId) return
		oprateloading.value = true
		let data = {
			total: form.value.price,
			list: [{
				id: form.value.performanceId,
				name: form.value.performanceName,
				furl: form.value.images && form.value.images[0] && form.value.images[0].furl || '',
				price: form.value.price,
				number: 1,
				type: 'PRESIDE'
			}]
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm',
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		oprateloading.value = false
	}
	
	onLoad((option) => {
		let id = option.id
		let title = option.title || '主持演出详情'
		uni.setNavigationBarTitle({
			title
		})
		if(id) getData(id)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<uv-skeletons :loading="loading" :skeleton="[{ type: 'line', num: 4, gap: '24rpx', style: ['height: 472rpx;', 'height: 128rpx;', 'height: 408rpx;', 'height: 400rpx;']}]">
				<swiper class="swiper-box" :interval="2000">
					<swiper-item v-for="(item, index) in form.images" :key="index"><uv-image :src="item.furl" width="100%" height="472"></uv-image></swiper-item>
				</swiper>
				<view class="host-info">
					<view class="box-view">
						<view class="box-name">{{form.performanceName || '--'}}</view>
						<view class="box-price">{{form.price? form.price.toFixed(2) : 0.00}}</view>
					</view>
					<view class="box-view">
						<view class="box-name">套餐内容</view>
						<view class="host-content">
							<!-- <view v-for="item in form.dishList" :key="item.id" class="content-box">
								<uv-icon name="checkmark" color="#FA3F00" size="30" /><text>全程3-4小时专业主持服务</text>
							</view> -->
							{{form.performanceDescription || '--'}}
						</view>
					</view>
					<view class="box-view">
						<view class="box-name">服务案例</view>
						<view class="host-case">
							<uv-parse :content="form.specifics" :tagStyle="parseStyle"></uv-parse>
							<!-- <uv-image v-for="item in form.dishList" :key="item.id" :src="item.img" width="330rpx" height="200rpx" radius="8"></uv-image> -->
						</view>
					</view>
				</view>
			</uv-skeletons>
		</view>
		<view class="app-bottom">
			<view class="text-price">{{form.price? form.price.toFixed(2) : 0.00}}</view>
			<uv-button color="linear-gradient(102deg, #FA3F00 0%, #FF7445 100%)" :custom-style="{width: '200rpx'}" shape="circle" text="立即下单" @click="goBuy"
				:disabled="oprateloading || loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 112rpx;
		.app-content{
			padding-bottom: 24rpx;
			.swiper-box{
				height: 472rpx;
			}
			.host-info{
				margin-top: 30rpx;
			}
			.box-view{
				padding: 24rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				.box-name{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.box-price{
					margin-top: 16rpx;
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
					color: #FF0D0D;
					&::before{
						content: "¥";
						font-size: 60%;
					}
				}
				.host-content{
					margin-top: 24rpx;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					.content-box{
						display: flex;
						align-items: center;
						gap: 8rpx;
					}
				}
				.host-case{
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 42rpx;
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 112rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 32rpx;
			font-weight: 600;
			.text-price{
				color: #FF0D0D;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
				&::before{
					content: "¥";
					font-size: 60%;
				}
			}
		}
	}
</style>